<template>

  <div>
        <el-aside class="sidebar">
          <ul>
            <li>
              <h4 style="text-align: center;">侧边栏</h4>
            </li>

            <li>
              <router-link to="/message">
                <div>
                  <p>个人信息</p>
                  <span>></span>
                </div>
              </router-link>
            </li>

            <li>
              <router-link to="/changemessage">
                <div>
                  <p>修改信息</p>
                  <span>></span>
                </div>
              </router-link>
            </li>

            <li>
              <router-link to="/mylike">
                <div>
                  <p>点赞</p>
                  <span>></span>
                </div>
              </router-link >
            </li>

            <li>
              <router-link to="/mystar">
                <div>
                  <p>收藏</p>
                  <span>></span>
                </div>
              </router-link>
            </li>

            <li>
              <router-link to="/myarticle">
                <div>
                  <p>我的文章</p>
                  <span>></span>
                </div>
              </router-link>
            </li>

            <li @click="exit">

                <div>
                  <p>退出登录</p>
                  <span>></span>
                </div>

            </li>

          </ul>
        </el-aside>

  </div>


</template>



<script>
import Nav1 from "@/components/nav/Nav1";


export default {
  name: 'myView',
  components: {
    // Nav1,
  },
  methods: {
    exit(){
      sessionStorage.removeItem('userId')
      this.$router.push('/login')
    }
  }


}


</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
  /*color: black;*/
}

.banner {
  width: 1150px;
  height: 800px;
  margin: 55px auto;
}
.right {
  width: 900px;
  height: 600px;
  float: left;

}



.sidebar {
  width: 250px;
  height: 950px;
  color: #ffffff;
  float: left;
}
.sidebar ul {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
}
.sidebar ul li {
  list-style: none;
  height: 50px;
  color: #222222;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  padding: 10px 0;
  transition: all .5s;
}
.sidebar ul li div {
  width: 100%;
  height: 100%;
}
.sidebar ul a {
  color: #222222;
}
.sidebar ul li p {
  float: left;
  margin-left: 50px;
}
.sidebar ul li span {
  float: right;
  margin-right: 20px;
}
.sidebar ul li:hover {
  background-color: orange;

  cursor: pointer;
}

/*.sidebar ul li:hover .sidebar-mask {*/
/*  display: block;*/
/*}*/

/*.sidebar-mask {*/
/*  display: none;*/
/*  position: absolute;*/
/*  top: 50px;*/
/*  right: 50px;*/
/*  width: 900px;*/
/*  height: 600px;*/
/*  background-color: rgba(0, 0, 0, .3);*/
/*  text-align: center;*/
/*}*/

</style>
